import { Component } from "react";
import { connect } from "react-redux";
import {
  HeaderWrapper,
  NavLogo,
  Nav,
  NavLeft,
  NavRight,
  HeaderLink,
  LinkItem,
  History,
} from "./style";
import { actionCreators } from "./store";
class header extends Component {
  //渲染历史记录
  getHisTory(state, list) {
    if (state) {
      return (
        <History>
          {list.map((item) => {
            return (
              <div className="item" key={item}>
                <div className="item__left">
                  <i className="iconfont icon-clock"></i>
                  <span>{item}</span>
                </div>
                <i className="iconfont icon-chahao"></i>
              </div>
            );
          })}
        </History>
      );
    }
  }
  render() {
    const { focused,changeFoucs,list } = this.props;
    return (
      <HeaderWrapper>
        <NavLogo href="/"></NavLogo>
        <Nav>
          <NavLeft>
            <p className="p1">首页</p>
            <p className="p2">下载APP</p>
            <div className={focused === true ? "search focus" : "search"}>
              <input
                type="text"
                placeholder="搜索"
                onFocus={() => {
                  changeFoucs(true);
                }}
                onBlur={() => {
                  changeFoucs(false);
                }}
              />
              <span className="iconfont icon-fangdajing"></span>
              {this.getHisTory(focused, list)}
            </div>
          </NavLeft>
          <NavRight>
            <p>Aa</p>
            <a href="/">登录</a>
          </NavRight>
        </Nav>
        <HeaderLink>
          <LinkItem>注册</LinkItem>
          <LinkItem className="link2">
            <span className="iconfont icon-yumaobi"></span>
            <span>写文章</span>
          </LinkItem>
        </HeaderLink>
      </HeaderWrapper>
    );
  }
}
const mapStateToProps = (state) => {
  return {
    // focused:state.get("header").get("focused")
    focused: state.getIn(["header", "focused"]),
    list: state.getIn(["header", "list"]),
  };
};
const mapActionToProps = (dispatch) => {
  return {
    changeFoucs(value) {
      const action = actionCreators.changeFocusStatus(value);
      dispatch(action);
      //如果聚焦,就去请求后端数据
      if(value)dispatch(actionCreators.getKeywordList())
    }
  };
};

export default connect(mapStateToProps, mapActionToProps)(header);
